<template>
  <el-dialog
    title="关联用户"
    append-to-body
    :close-on-click-modal="false"
    @close="closeDialog()"
    :visible="visible"
    width="1200px"
  >
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="登录手机号" prop="loginAccount">
        <el-input
          v-model.trim="queryParams.loginAccount"
          placeholder="请输入登录手机号"
          clearable
          size="small"
          @keyup.enter.native="getDataList"
        />
      </el-form-item>
      <el-form-item label="昵称" prop="nickName">
        <el-input
          v-model.trim="queryParams.nickName"
          placeholder="请输入昵称"
          clearable
          size="small"
          @keyup.enter.native="getDataList"
        />
      </el-form-item>


      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getDataList"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button>
      </el-form-item>
    </el-form>


    <div class="avue-crud">
      <el-table :data="dataList" border v-loading="dataListLoading">
        <el-table-column
          type="index"
          header-align="center"
          :index="indexMethod"
          align="center"
          label="编号"
        >
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="头像"
        >
          <template slot-scope="scope">
            <el-avatar icon="el-icon-user-solid" :src="scope.row.headerUrl"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          prop="loginAccount"
          header-align="center"
          align="center"
          label="登录手机号"
        >
        </el-table-column>
        <el-table-column
          prop="nickName"
          header-align="center"
          align="center"
          label="昵称"
        >
        </el-table-column>
        <el-table-column
          prop="promotionChannelName"
          header-align="center"
          align="center"
          label="推广渠道">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="注册渠道"
        >
          <template slot-scope="{row}">
            <span>{{platformNameEnum[row.platform]}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="invitedCode"
          header-align="center"
          align="center"
          label="邀请码">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="注册来源">
          <template slot-scope="{row}">
            <span v-if="row.registerSource == registerSourceEnum.manual">手动注册</span>
            <span v-else>excel导入</span>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="createTime"
          header-align="center"
          align="center"
          label="注册时间"
          width="140"
        >
        </el-table-column>
      </el-table>
    </div>

    <div class="avue-crud__pagination">
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="queryParams.pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryParams.pageSize"
        :total="totalPage"
        background
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>

  </el-dialog>
</template>

<script>
import {getUserBySaleUserId} from '@/api/shop_user/user';
import {shopUserTypeEnum, platformNameEnum, registerSourceEnum} from '@/const/const';

export default {
  props:{
    visible: {
      type: Boolean,
      default: false
    },
  },
  data(){
    return{
      shopUserTypeEnum,
      registerSourceEnum,
      platformNameEnum,
      queryParams:{
        pageIndex: 1,
        pageSize: 10,
        loginAccount:'',
        nickName:'',
        shopUserType:shopUserTypeEnum.normal
      },
      dataListLoading:false,
      dataList:[],
      totalPage:0,
      salesShopUserId: null
    }
  },
  methods:{

    /**
     * 初始化
     */
    init(salesShopUserId){
      this.queryParams.salesShopUserId = salesShopUserId
      this.getDataList()
    },

    /**
     * 检索
     */
    getDataList(){
      this.dataListLoading = true
      getUserBySaleUserId({
        salesShopUserId: this.queryParams.salesShopUserId,
        loginAccount: this.queryParams.loginAccount,
        nickName: this.queryParams.nickName,
        shopUserType: this.queryParams.shopUserType
      }).then(response=>{
        this.dataListLoading = false;
        this.dataList = response.data.data.records;
        this.totalPage = response.data.data.total;
      })
    },

    /**
     * 每页数
     */
     sizeChangeHandle(val) {
      this.queryParams.pageSize = val;
      this.queryParams.pageIndex = 1;
      this.getDataList();
    },

    /**
     * 当前页
     */
    currentChangeHandle(val) {
      this.queryParams.pageIndex = val;
      this.getDataList();
    },

    indexMethod(index) {
      return (
        (this.queryParams.pageIndex - 1) * this.queryParams.pageSize + index + 1
      );
    },

    /**
     * 重置
     */
     resetQuery() {
      this.queryParams.pageIndex = 1;
      this.queryParams.pageSize = 10;
      this.resetForm("queryForm");
      this.getDataList();
    },

    /**
     * 重置表单
     */
    closeDialog() {
      this.$emit('update:visible', false)
    },
  }
}
</script>